<template>
  <div class="container">
    <h2>用户信息</h2>
    <div class="search-container">
      <input v-model="searchQuery" placeholder="搜索用户信息..." @input="searchUsers" />
    </div>
    <!-- 用户信息表格 -->
    <table class="user-table">
      <thead>
      <tr>
        <th @click="sortTable('username')">
          账号名
          <span v-if="sortedBy === 'username'">
              <span v-if="sortDirection === 'asc'">↑</span>
              <span v-if="sortDirection === 'desc'">↓</span>
            </span>
        </th>
        <th @click="sortTable('password')">
          密码
          <span v-if="sortedBy === 'password'">
              <span v-if="sortDirection === 'asc'">↑</span>
              <span v-if="sortDirection === 'desc'">↓</span>
            </span>
        </th>
        <th @click="sortTable('phone')">
          电话
          <span v-if="sortedBy === 'phone'">
              <span v-if="sortDirection === 'asc'">↑</span>
              <span v-if="sortDirection === 'desc'">↓</span>
            </span>
        </th>
        <th @click="sortTable('address')">
          地址
          <span v-if="sortedBy === 'address'">
              <span v-if="sortDirection === 'asc'">↑</span>
              <span v-if="sortDirection === 'desc'">↓</span>
            </span>
        </th>
        <th @click="sortTable('email')">
          邮箱
          <span v-if="sortedBy === 'email'">
              <span v-if="sortDirection === 'asc'">↑</span>
              <span v-if="sortDirection === 'desc'">↓</span>
            </span>
        </th>
        <th @click="sortTable('lastLoginTime')">
          最后登录时间
          <span v-if="sortedBy === 'lastLoginTime'">
              <span v-if="sortDirection === 'asc'">↑</span>
              <span v-if="sortDirection === 'desc'">↓</span>
            </span>
        </th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(user, index) in filteredUsers" :key="user.id">
        <td>{{ user.username }}</td>
        <td>{{ maskPassword(user.passwd) }}</td>
        <td>{{ user.phone }}</td>
        <td>{{ user.address }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.lasttime }}</td>
        <td>
          <button @click="deleteUser(user.id)"  class="delete-button">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <!-- 提示信息 -->
    <div v-if="deletedUserMessage" class="message">{{ deletedUserMessage }}</div>
    <div v-if="filteredUsers.length === 0">
      <p>目前没有符合条件的用户信息。</p>
    </div>
  </div>
</template>

<script>
import { findAllUser , deleteUser, findUser } from '../../api/admins.js';

export default {
  data() {
    return {
      searchQuery: '',
      users: [],
      sortedBy: '',
      sortDirection: 'asc',
      deletedUserMessage: ''
    };
  },
  computed: {
    filteredUsers() {
      return this.users;
    }
  },
  methods: {
    async deleteUser(userId) {
      if (confirm('确定要删除这个用户吗？')) {
        try {
          await deleteUser(userId);
          this.users = this.users.filter(user => user.id !== userId);
          this.deletedUserMessage = '用户已删除！';
          setTimeout(() => {
            this.deletedUserMessage = '';
          }, 2000);
        } catch (error) {
          console.error('删除用户失败：', error);
          alert('删除用户失败，请稍后重试！');
        }
      }
    },
    async fetchUsers() {
      try {
        const response = await findAllUser();
        this.users = response.data.data;
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    },
    async searchUsers() {
      if (this.searchQuery) {
        try {
          const response = await findUser(this.searchQuery);
          this.users = response.data.data;
        } catch (error) {
          console.error('搜索用户失败：', error);
          alert('搜索用户失败，请稍后重试！');
        }
      } else {
        this.fetchUsers();
      }
    },
    sortTable(field) {
      if (this.sortedBy === field) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortedBy = field;
        this.sortDirection = 'asc';
      }
    },
    maskPassword(password) {
      return password ? password.substr(0, 3) + '****' : '';
    }
  },
  mounted() {
    this.fetchUsers();
  }
};
</script>


<style scoped>
/* 头*/
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
  font-family: 'Arial', sans-serif;
  background-color: #f7f7f7;
}
h2 {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}
/* 搜索*/
.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.search-container input {
  padding: 10px;
  width: 300px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}
.search-container input:focus {
  border-color: #5b9bd5;
  outline: none;
}
/* 表 */
.user-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.user-table th,
.user-table td {
  text-align: center; /* 表格内容居中 */
  padding: 12px 15px;
  border-bottom: 1px solid #ddd;
}
.user-table th {
  background-color: #f4f4f4;
  font-weight: bold;
  cursor: pointer;
}
.user-table th:hover {
  background-color: #e2e2e2;
}
.user-table td:last-child {
  text-align: center; /* 操作列内容居中 */
}
.delete-button {
  padding: 6px 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.delete-button:hover {
  background-color: #45a049;
}
.delete-button:disabled {
  background-color: #dcdcdc;
  cursor: not-allowed;
}
/* 信息 */
.message {
  color: green;
  font-size: 1rem;
  text-align: center;
  margin-top: 20px;
}
</style>